<template>
  <div class="addcase">
    <div class="toenter">
      <div class="flex row_bet">
        <div>
          <div class="title">分类</div>
          <div>
            <a-select
              label-in-value
              style="width: 207px;"
              placeholder="请选择分类"
              @change="handleChange"
              class="br4"
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div>
          <div class="title">标题</div>
          <div>
            <a-input v-model="title" placeholder="输入标题" class="br4" style="width: 675px"></a-input>
          </div>
        </div>
      </div>
      <div class="casemain">
        <div class="title">案例内容</div>
        <div style="background-color: #ffffff;width:914px;">
          <editor-bar v-model="content" :value="content" @change="getEditor" id="weditor"></editor-bar>
        </div>
      </div>
    </div>
    <div class="footer">
      <div style="width:914px;margin: 0 auto;text-align: right;">
        <a-button type="primary" :disabled="btnloading" class="br4" @click="dosubmit">
          <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
          {{ btnloading===true?'发布中...':'发布案例' }}
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { dosubmitcase, getClassInfo } from '@/api/caseApi'
  import EditorBar from '@/components/Editor/WangEditor'

  export default {
    name: 'Addcase',
    components: {
      EditorBar
    },
    data () {
      return {
        btnloading: false,
        classList: [],
        class_id: '',
        title: '',
        content: ''
      }
    },
    computed: {},
    created () {
      this.getClassInfo()
    },
    mounted () {

    },
    methods: {
      dosubmit () {
        this.btnloading = true
        if (this.class_id !== '' &&
          this.title !== '' &&
          this.content !== '') {
          dosubmitcase({
            class_id: this.class_id,
            title: this.title,
            content: this.content
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.class_id = ''
              this.title = ''
              this.content = ''
              this.btnloading = false
              this.$message.success('发布成功!')
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.btnloading = false
          this.$message.info('请检查所需内容!')
        }
      },
      getEditor (value) {
        console.log(value)
        this.content = value
      },
      handleChange (value) {
        console.log(value) //
        this.class_id = value.key
      },
      getClassInfo () {
        getClassInfo().then(res => {
          // console.log(res)
          this.classList.push(...res.data)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .addcase {
    .toenter {
      width: 914px;
      margin: 0 auto;

      .title {
        margin-bottom: 7px;
        color: #101010;
      }

      /deep/ .ant-select-selection {
        border-radius: 4px;
      }
    }

    .casemain {
      margin-top: 24px;

      /deep/ .w-e-text-container {
        min-height: 500px !important;
        border-radius: 0 0 4px 4px;
        height: 100% !important;

        .w-e-text {
          img {
            width: 300px;
          }
        }
      }

      /deep/ .w-e-toolbar {
        border-radius: 4px 4px 0 0;
      }

    }

    .footer {
      width: 100%;
      background-color: #ffffff;
      height: 51px;
      margin-top: 38px;
      line-height: 51px;
      position: fixed;
      bottom: 0;
      left: 257px;
      z-index: 999;
    }
  }
</style>
